import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'story_detail_logic.dart';
import 'story_detail_state.dart';

class StoryDetailPage extends StatelessWidget {
  const StoryDetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final StoryDetailLogic logic = Get.put(StoryDetailLogic());
    final StoryDetailState state = Get.find<StoryDetailLogic>().state;

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            _buildAppBar(logic),
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildCoverImage(),
                    _buildStoryTitle(),
                    _buildStoryContent(),
                    _buildInteractionBar(state),
                    Divider(height: 1, color: Colors.grey.shade300),
                    _buildComments(state),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildAppBar(StoryDetailLogic logic) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          IconButton(
            icon: Icon(Icons.arrow_back_ios, color: Colors.black),
            onPressed: () => Get.back(),
          ),
          TextButton.icon(
            onPressed: () => logic.navigateToCreate(),
            icon: Icon(
              Icons.edit,
              color: Colors.blue,
              size: 20.r,
            ),
            label: Text(
              '去创作',
              style: TextStyle(
                color: Colors.blue,
                fontSize: 16.sp,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCoverImage() {
    return Container(
      width: double.infinity,
      height: 240.h,
      color: Colors.grey.shade300,
      alignment: Alignment.center,
      child: Text(
        '封面图',
        style: TextStyle(
          fontSize: 18.sp,
          color: Colors.black54,
        ),
      ),
    );
  }

  Widget _buildStoryTitle() {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Text(
        '岁月的痕迹',
        style: TextStyle(
          fontSize: 24.sp,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    );
  }

  Widget _buildStoryContent() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Text(
        '我今年八十有三了，人老了，就爱回忆过去的事儿，那些经历就像电影一样，在我脑海里不停地放映。\n\n'
        '小时候，日子虽说过得穷苦，可心里头却满是快乐。村子不大，邻里乡亲都热乎得很。春天一到，漫山遍野的野花就开了，我和小伙伴们像脱缰的野马，在田野里奔跑嬉戏，追逐着那五彩斑斓的蝴蝶。我们会一起去河里摸鱼，河水清澈见底，能看到小鱼小虾在脚边游来游去。有一次，我和小伙伴们，掉进水里，浑身湿透，狼狈得很，小伙伴们却笑得前仰后合。那时候的快乐，简单纯粹，没有一丝杂质。\n\n'
        '后来，我到了该成家的年纪。经人介绍，认识了我的老伴儿。她是个温柔善良的女子，第一次见面，她那害羞的眼神和浅浅的微笑，就印在了我的心里。我们的婚礼办得很简单，没有华丽的礼服，也没有盛大的宴席，就请了亲朋好友吃了顿便饭。婚后，我们过得很清贫但很幸福，日出而作，日落而息。农忙时，累得腰酸背痛，可回到家，看到她准备好的热饭热菜，心里就暖烘烘的。再后来，孩子们相继出生，家里一下子热闹了起来。看着孩子们一点点长大，学会走路，学会说话，叫第一声爸爸妈妈，那种喜悦，真的无法用言语来形容。为了让孩子们能过上好日子，我和老伴儿省吃俭用，拼命干活。记得有一年冬天，家里没钱给孩子们买新棉衣，老伴儿就熬夜，把旧衣服翻新，一针一线地缝补，就为了让孩子们能暖和些。',
        style: TextStyle(
          fontSize: 16.sp,
          color: Colors.black87,
          height: 1.6,
        ),
      ),
    );
  }

  Widget _buildInteractionBar(StoryDetailState state) {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Row(
        children: [
          Icon(
            Icons.favorite,
            color: Colors.red,
            size: 24.r,
          ),
          SizedBox(width: 4.w),
          Text(
            'xx',
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.grey.shade600,
            ),
          ),
          SizedBox(width: 20.w),
          Icon(
            Icons.chat_bubble_outline,
            color: Colors.grey.shade600,
            size: 24.r,
          ),
          SizedBox(width: 4.w),
          Text(
            'x',
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.grey.shade600,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildComments(StoryDetailState state) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        for (var comment in state.commentList)
          _buildCommentItem(comment),
      ],
    );
  }

  Widget _buildCommentItem(Comment comment) {
    return Container(
      padding: EdgeInsets.all(16.w),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 40.w,
            height: 40.h,
            decoration: BoxDecoration(
              color: Colors.grey.shade400,
              shape: BoxShape.circle,
            ),
          ),
          SizedBox(width: 12.w),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '用户名',
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w500,
                        color: Colors.black87,
                      ),
                    ),
                    Row(
                      children: [
                        Text(
                          '${comment.likes}',
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.grey.shade600,
                          ),
                        ),
                        SizedBox(width: 4.w),
                        Icon(
                          Icons.favorite,
                          color: Colors.grey.shade400,
                          size: 16.r,
                        ),
                      ],
                    ),
                  ],
                ),
                SizedBox(height: 4.h),
                Text(
                  comment.content,
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.black87,
                  ),
                ),
                SizedBox(height: 4.h),
                Text(
                  comment.time,
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
} 